<template>
    <div>
        <el-button type="primary" @click="addStatus = true" style="margin-bottom: 10px;">添加角色</el-button>
        <!-- 角色列表 -->
        <el-table :data="rolesList" :border="true">
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <div class="box" v-for="(item, index) in scope.row.children" :key="index">
                        <div class="left">

                            <el-tag effect="dark" closable @close="del(scope.row, item.id)">{{ item.authName }}
                            </el-tag>

                        </div>
                        <div class="right">
                            <div v-for="(e, i) in item.children" :key="i" class="right_box">
                                <div class="right1  border_none">
                                    <el-tag effect="dark" closable type="success" @close="del(scope.row, e.id)">{{
                                            e.authName
                                    }}</el-tag>

                                </div>
                                <div class="right2">
                                    <el-tag type="warning" effect="dark" closable v-for="(ee, ii) in e.children"
                                        :key="ii" style="margin: 10px;" @close="del(scope.row, ee.id)">{{
                                                ee.authName
                                        }}</el-tag>
                                </div>
                            </div>


                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column type="index" label="#"> </el-table-column>
            <el-table-column label="角色名称" prop="roleName"> </el-table-column>
            <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>

                    <el-button type="danger" icon="el-icon-delete" @click="delline(scope.row.id)">删除</el-button>
                    <el-button type="warning" icon="el-icon-share" @click="right(scope.row)">分配权限</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分配权限 -->

        <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
            <span>
                <el-tree :data="treeList" show-checkbox node-key="id" :default-expand-all="true" :props="defaultProps"
                    :default-checked-keys="keys" ref="tree">
                </el-tree>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="decided">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加用户 -->
        <el-dialog title="添加用户" :visible.sync="addStatus" width="50%">
            <el-form :model="addFrom" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input type="text" v-model="addFrom.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input type="text" v-model="addFrom.roleDesc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- //编辑角色 -->
        <el-dialog title="编辑角色" :visible.sync="editPop" width="50%">
            <el-form :model="addFrom" status-icon label-width="100px" class="demo-ruleForm">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input type="text" v-model="editForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input type="text" v-model="editForm.roleDesc"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editPop = false">取 消</el-button>
                <el-button type="primary" @click="edits">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getRoles, authorization, add, del, delline, edit } from '@/http/roles'
import { getRight } from '@/http/rights'
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            console.log();
            if (value == '') {
                callback(new Error('请输入角色名称'));
            }
        };
        return {
            rolesList: [],
            //添加角色弹出框状态
            addStatus: false,
            //角色表单
            addFrom: {
                roleName: '',
                roleDesc: ''
            },
            //角色id
            roleId: 0,
            //分配权限状态
            dialogVisible: false,
            //树形控件数据
            treeList: [],
            //树形控件选中的id
            keys: [],
            //编辑角色的弹出框
            editPop: false,
            //编辑角色表单
            editForm: {
                roleName: '',
                roleDesc: ''
            },
            defaultProps: {
                children: 'children',
                label: 'authName'
            },
            rules: {
                roleName: [
                    { validator: validatePass, trigger: 'blur' }
                ],


            }
        }
    },

    created() {
        getRoles().then(res => {
            this.rolesList = res.data

        })
    },
    methods: {
        //添加用户
        async submitForm() {

            add(this.addFrom).then(res => {
                if (res.meta.status < 300) {
                    this.$message({
                        message: res.meta.msg,
                        type: 'success'
                    });
                    this.addStatus = false
                    this.fn()
                } else {
                    this.$message.error(res.meta.msg);
                }
                this.addFrom.roleName = ''
                this.addFrom.roleDesc = ''
            })

        },
        // 重置表单
        resetForm(formName) {
            this.addFrom.roleName = ''
            this.addFrom.roleDesc = ''

        },
        //请求所有权限
        async right(row) {
            console.log(row);
            this.dialogVisible = true
            let res = await getRight('tree')

            this.treeList = res.data
            this.keys = []
            this.roleId = row.id
            //获取选中的id
            this.kes(row, this.keys);
        },

        kes(row, arr) {
            if (!row.children) {
                arr.push(row.id)
            } else {
                row.children.forEach(element => {
                    this.kes(element, arr)
                });
            }
        },
        //选择树形
        async decided() {
            //获取选中节点id 和半选择id
            var rids = [...this.$refs.tree.getCheckedKeys(), ...this.$refs.tree.getHalfCheckedKeys()].join(",")
            let res = await authorization(this.roleId, { rids });
            this.dialogVisible = false
            //更新页面
            getRoles().then(res => {
                this.rolesList = res.data
                this.dialogVisible = false

            })
        },
        //渲染页面
        async fn() {
            let res = await getRoles()
            this.rolesList = res.data
        },
        //删除角色权限
        del(row, i) {
            let { id } = row
            let arr = this.rolesList.findIndex(item => item == row)
            del(id, i).then(res => {
                this.rolesList[arr].children = res.data
            })
        },
        //删除角色
        async delline(id) {
            await delline(id)
            getRoles().then(res => {
                this.rolesList = res.data
                this.dialogVisible = false
            })
        },
        //编辑角色
        async edit(obj) {
            this.editForm = obj
            this.editPop = true
        },
        //确定编辑
        async edits() {
            let { id, roleName, roleDesc } = this.editForm
            let res = await edit(id, { roleName, roleDesc })
            this.editPop = false
            this.fn()
        }

    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    border: 1px solid rgb(54, 53, 53);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -1px;

    .left {
        width: 20%;

        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 10px;
        height: 100%;
    }


    .right {
        flex: 1;
        border-left: 1px solid #000;


        .right_box {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #000;
            margin-bottom: -1px;

            .right1 {
                width: 20%;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                align-items: center;


                >div {
                    width: 100%;

                }
            }

            .right2 {
                flex: 1;
                padding: 30px;
                border-left: 1px solid #000;

            }
        }
    }
}

.boredr_none {
    border-bottom: none !important;
}
</style>